<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>暖言树洞 - 启动页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 启动页样式 */
        body {
            overflow: hidden;
            touch-action: pan-y;
        }
        .splash-container {
            height: 100vh;
            position: relative;
        }
        .splash-slide {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            text-align: center;
            transition: transform 0.5s ease-in-out;
        }
        .slide-indicators {
            position: absolute;
            bottom: 8rem;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            z-index: 10;
        }
        .indicator {
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }
        .indicator.active {
            background-color: white;
            transform: scale(1.3);
        }
        .start-button {
            position: absolute;
            bottom: 3rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .start-button.visible {
            opacity: 1;
        }
        /* 动画效果 */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .floating {
            animation: float 3s ease-in-out infinite;
        }
        .slide-icon {
            margin-bottom: 2rem;
            font-size: 5rem;
            color: white;
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .slide-title {
            font-size: 2rem;
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .slide-desc {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 80%;
            line-height: 1.6;
        }
        .scroll-indicator {
            position: absolute;
            bottom: 6rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        .bounce { animation: bounce 2s infinite; }
    </style>
</head>
<body>
    <div class="splash-container">
        <!-- 第一页：心情日记与AI回复 -->
        <section class="splash-slide bg-gradient-to-br from-green-500 to-teal-400" style="transform: translateY(0%);">
            <i class="fas fa-book-open slide-icon floating"></i>
            <h2 class="slide-title">记录你的心情故事</h2>
            <p class="slide-desc">写下你的每日心情，AI暖言猫猫会为你送上温暖治愈的回复，陪伴你度过每一天</p>
            <div class="scroll-indicator bounce">
                <i class="fas fa-chevron-down text-white text-2xl"></i>
                <p class="text-white mt-2 text-sm">向下滑动继续</p>
            </div>
        </section>

        <!-- 第二页：隐私计算与漂流瓶 -->
        <section class="splash-slide" style="background: linear-gradient(to bottom right, #3b82f6, #818cf8); transform: translateY(100%);">
            <i class="fas fa-paper-plane slide-icon floating"></i>
            <h2 class="slide-title">隐私保护的心灵漂流</h2>
            <p class="slide-desc">经过隐私计算处理，你的心情可以安全漂流，与陌生人进行善意的交流与鼓励</p>
            <div class="scroll-indicator bounce">
                <i class="fas fa-chevron-down text-white text-2xl"></i>
                <p class="text-white mt-2 text-sm">向下滑动继续</p>
            </div>
        </section>

        <!-- 第三页：公益与社交 -->
        <section class="splash-slide bg-gradient-to-br from-purple-500 to-pink-400" style="transform: translateY(100%);">
            <i class="fas fa-heart slide-icon floating"></i>
            <h2 class="slide-title">温暖传递，公益同行</h2>
            <p class="slide-desc">用善意获得的暖心货币，兑换公益热力值，一起参与公益计划，让世界更美好</p>
        </section>

        <!-- 指示器 -->
        <div class="slide-indicators">
            <div class="indicator active"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
        </div>

        <!-- 启动按钮 -->
        <a href="index.html" class="start-button btn-primary px-8 py-3 text-lg">
            启动应用 <i class="fas fa-arrow-right ml-2"></i>
        </a>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelectorAll('.splash-slide');
            const indicators = document.querySelectorAll('.indicator');
            const startButton = document.querySelector('.start-button');
            let currentSlide = 0;
            let isAnimating = false;

            // 滑动处理
            function goToSlide(index) {
                if (isAnimating) return;
                isAnimating = true;

                // 更新滑动位置
                slides.forEach((slide, i) => {
                    slide.style.transform = `translateY(${(i - index) * 100}%)`;
                });

                // 更新指示器
                indicators.forEach((indicator, i) => {
                    indicator.classList.toggle('active', i === index);
                });

                // 显示/隐藏启动按钮
                if (index === slides.length - 1) {
                    startButton.classList.add('visible');
                } else {
                    startButton.classList.remove('visible');
                }

                currentSlide = index;
                setTimeout(() => { isAnimating = false; }, 500);
            }

            // 点击指示器切换
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => goToSlide(index));
            });

            // 触摸滑动支持
            let touchStartY = 0;
            let touchEndY = 0;

            document.addEventListener('touchstart', e => {
                touchStartY = e.changedTouches[0].screenY;
            }, false);

            document.addEventListener('touchend', e => {
                touchEndY = e.changedTouches[0].screenY;
                handleSwipe();
            }, false);

            function handleSwipe() {
                // 向上滑动
                if (touchStartY - touchEndY > 50 && currentSlide < slides.length - 1) {
                    goToSlide(currentSlide + 1);
                }
                // 向下滑动
                if (touchEndY - touchStartY > 50 && currentSlide > 0) {
                    goToSlide(currentSlide - 1);
                }
            }

            // 鼠标滚轮支持
            document.addEventListener('wheel', e => {
                if (e.deltaY > 0 && currentSlide < slides.length - 1) {
                    goToSlide(currentSlide + 1);
                } else if (e.deltaY < 0 && currentSlide > 0) {
                    goToSlide(currentSlide - 1);
                }
            });
            // 键盘导航增强
            document.addEventListener('keydown', e => {
                if (e.key === 'ArrowUp' || e.key === 'ArrowRight' && currentSlide < slides.length - 1) {
                    goToSlide(currentSlide + 1);
                } else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft' && currentSlide > 0) {
                    goToSlide(currentSlide - 1);
                }
            });
        });
    </script>
</body>
</html>